<template>
  <div>
    <mt-header title="代理商后台">
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <div class="banner">
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537610740092&di=21a455e6a0218148901585a75b41dd0e&imgtype=0&src=http%3A%2F%2Fwww.isto.net.cn%2FUploads%2F201703%2F58c5f4c58da95.jpg" width="100%">
    </div>
    <div class="grid">
      <ul>
        <li>
          <router-link :to="{name: 'customer'}">
            <div class="icon_p">
              <p><i class="iconfont el-icon-kehu"></i></p>
              <p>我的客户</p>
            </div>
          </router-link>
        </li>
        <li>
          <router-link :to="{name: 'QRCode'}">
            <div class="icon_p">
              <p><i class="iconfont el-icon-qr_code"></i></p>
              <p>我的二维码</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {}
  },
  methods: {},
  created () {}
}
</script>

<style scoped>
  .banner img{
    display: block;
  }
  .grid{
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
    box-sizing: border-box;
  }
  .grid li{
    width: 33.33333%;
    float: left;
    height: 100px;
    list-style: none;
    border-right: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    box-sizing: border-box;
    text-align: center;
    position: relative;
  }
  .icon_p{
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -21px;
  }
  .grid li a{
    text-decoration: none;
  }
  .grid li p{
    font-size: 12px;
    color: #80848f;
  }
  .grid li p i{
    font-size: 24px;
  }
</style>
